@import '@/assets/css/global-style.scss';
.box_chat {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 20;
  background: rgba(0, 0, 0, 0.3);
}

.chat {
  @include set-location('position', 'center');
  height: 70%;
  width: 70%;
  background: #fff;
  border-radius: 0.625rem;
  overflow: hidden;
}

.session_list {
  width: 20%;
  height: 100%;
  background: #f8f8fa;

  .header {
    @include set-location('display', 'center');
    height: 3.125rem;
  }

  .list_item:hover {
    background: rgba(0, 0, 0, 0.08);
  }

  .selected_list_item {
    background: rgba(0, 0, 0, 0.08);
  }

  .list_item {
    @include set-location('display', 'horization');
    justify-content: space-between;
    height: 2.5rem;
    padding: 0 0.625rem;
    cursor: pointer;
    margin-bottom: 0.625rem;
    transition: all 0.5s;

    p {
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap; /* 不换行 */
    }

    img {
      height: 1.25rem;
      width: 1.25rem;
    }
  }
}

.char_body {
  position: relative;
  padding: 0.625rem;
  width: 100%;
  box-sizing: border-box;

  .box_content {
    height: 90%;
    width: 100%;
    overflow: auto;

    img {
      height: 1.25rem;
      width: 1.25rem;
    }

    .ai {
      margin-bottom: 0.625rem;

      .content {
        margin-left: 0.3125rem;
      }
    }

    .you {
      display: flex;
      justify-content: flex-end;
      margin-bottom: 0.625rem;

      .content {
        margin-right: 0.3125rem;
      }
    }

    .content {
      padding: 0.625rem;
      background: rgba(0, 0, 0, 0.05);
      border-radius: 0.0625rem;
    }
  }

  .box_send {
    // position: absolute;
    // bottom: 0.125rem;
    height: 3.125rem;
    width: 100%;
    border: 0.0625rem solid #000;
    background-color: #f8f8fa;
    border-radius: 1.25rem;
    overflow: hidden;
    padding: 0 1.25rem;

    .input {
      @include set-location('display', 'center');
      flex: 1;
      height: 68%;
    }

    input {
      width: 100%;
      height: 100%;
      border: none;
      background: transparent;
    }
    input:focus {
      outline: none;
    }

    .btn {
      @include set-location('display', 'center');
      width: 35px;
      height: 35px;
      font-size: 0.875rem;
      background-color: #f6770f;
      border-radius: 0.625rem;
      cursor: pointer;
      color: #fff;
    }
  }

  .can_not_send {
    filter: grayscale(100%);
    cursor: not-allowed !important;
  }
}
